<template>
  <div style="background-color: #FFFFFF;padding: 15px">
    <span style="font-size: 19px;font-weight: 600">文件列表</span><br>
  </div>

  <div class="workContent">
    <a-list
        class="demo-loadmore-list"
        :loading="state.initLoading"
        item-layout="horizontal"
        :data-source="fileList"
    >
      <template #renderItem="{ item }">
        <a-list-item>
          <template #actions>
            <div style="margin-right: 10px">
              <a @click="downloadFile(item.fileName)" style="color: blue">下载</a>&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;
              <a-popconfirm title="确定删除吗？" ok-text="确定" cancel-text="取消" @confirm="clickRemoveFile(item.fileName)">
                <a href="#" style="color: red">删除</a>
              </a-popconfirm>
            </div>

          </template>
          <a-skeleton avatar :title="false" :loading="!!item.loading" active>
            <a-list-item-meta
            >
              <template #title>
                <a :href="'http://121.37.0.16:9000/public/'+ item.fileName">&nbsp;&nbsp;&nbsp;&nbsp;{{ item.fileName }}</a>
              </template>
            </a-list-item-meta>
          </a-skeleton>
        </a-list-item>
      </template>
    </a-list>
  </div><br>
</template>

<script setup>
import {getFileList, removeFile} from "@/utils/file";
import {reactive, ref} from "vue";
import {message} from "ant-design-vue";


const fileList = ref([])
const state = reactive({
  initLoading: false,

})

function getFileListData(){
  state.initLoading = true
  getFileList().then(res =>{
    if (res.status == 200){
      state.initLoading = false
      fileList.value = res.data
      // console.log(fileList.value)
    }else{
      message.error('网络异常，请刷新重试')
    }
  })
}
getFileListData()

const downloadFile =function (fileName){
  // console.log(fileName)
  window.location.href = 'http://121.37.0.16:9000/public/' + fileName
  message.success('下载成功')
}

const clickRemoveFile = function (fileName){
  removeFile(fileName).then(res => {
    if (res.status == 200) {
      message.success('删除成功')
      getFileListData()
    }else{
      message.error('删除失败')
    }
  })

}


</script>

<style scoped>
.workContent{
  width: 96%;margin: 25px auto 0 auto;
  background-color: #FFFFFF;
  padding: 10px 20px;
}
</style>